<template>
    <h4></h4>
</template>

<script setup lang="ts">
    import {ref,toRef,reactive,toRefs,shallowReactive,shallowRef} from 'vue'
    let person = reactive({
        name:'zs',
        age:28,
        job:{
            j1:{
                salary:20
            }
        }
    })
    let name1 = person.name
    let name2 = toRef(person,'name')
    // console.log(name1,'--------',name2.value)
    person.name = 'ls'
    // console.log(name1,'--------',name2.value,'----------',person)
    const people = toRefs(person)
    // console.log('------',people)
    /*let state = shallowReactive({
        foo: 1,
        nested: {
            bar: 2
        }
    })
    state.foo++
    state.nested.bar++
    console.log(state.nested.bar)*/

    const state = shallowRef({
        count:10
    })
    state.value.count++
    console.log(state.value.count)
</script>

<style scoped lang="less">

</style>
